<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	</head>
	<style>
		.aui-img-object1 {
			/*width: 100px;*/
			/*height: 60px;*/
			/*height: 50px;*/
			margin-right: 5px;
			/*border: 1px solid #16A085;*/
			max-width: 100px;
			max-height: 60px;
			margin: 0 auto;
			width: expression(document.body.clientWidth > 100?"100px":"auto" );
			height: expression(document.body.clientHeight > 60?"60px":"auto" );
		}
		.mysec {
			margin-right: 5px;
			width: 100px;
			height: 60px;
			border: solid 1px #ccc;
			background-color: #eee;
			background: url(../image/sig.png);/*图片地址*/
			background-origin: content;/*从content区域开始显示背景*/
			background-position: 50% 50%;/*图片上下左右居中*/
			background-size: contain;/*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/
			background-repeat: no-repeat;/*图像不重复显示*/
		}
		.hidden {
			display: none;
		}
		.moban {
			margin-left: 5px;
			background: #0062CC;
			color: #fff;
		}
		.true {
			margin-left: 5px;
			background: #27AE60;
			border: 1px solid #27AE60;
			color: #fff;
		}
		.false {
			margin-left: 5px;
			background: #E13430;
			border: 1px solid #E13430;
			color: #fff;
		}
		button, .aui-btn {
			padding: 4px 6px;
			margin-bottom: 0;
			font-size: 16px;
		}
	</style>
	<body>
		<div class="aui-content">
			<ul class="aui-user-view hidden" id="list0"></ul>
			<ul class="aui-user-view" id="list1"></ul>
			<ul class="aui-user-view hidden" id="list2"></ul>
			<script id="template0" type="text/x-dot-template">
				{{for(var i=0;i<it.length;i++){}}
				<li class="aui-user-view-cell aui-img" value="{{=it[i].n0}}">
				<div class="aui-col-xs-4 mysec icache0" imgurl="{{=it[i].imgurl}}" imgfile="{{=it[i].imgfile}}">
				</div>
				<div class="aui-col-xs-7">
				<span>{{=it[i].name}}
				{{?it[i].result=="真"}}
				<p class="aui-pull-right"><button class="aui-btn aui-btn-primary verify " >{{=it[i].result}}</button>
				</p>
				{{??it[i].result=="假"}}
				<p class="aui-pull-right"><button class="aui-btn aui-btn-danger verify " >{{=it[i].result}}</button>
				</p>
				{{??}}
				<p class="aui-pull-right "><button class="aui-btn aui-btn-primary verify hidden" >{{=it[i].result}}</button>
				</p>
				{{?}}
				</span>
				<p class='aui-ellipsis-1'>{{=it[i].time}}</p>
				</div>
				<div class="aui-col-xs-1">
				<input class="aui-checkbox aui-radio-info" type="checkbox" name="demo">
				</div>
				</li>
				{{}}}
			</script>
			<script id="template1" type="text/x-dot-template">
				{{for(var i=0;i<it.length;i++){}}
				<li class="aui-user-view-cell aui-img" value="{{=it[i].n0}}">
				<div class="aui-col-xs-4 mysec icache1" imgurl="{{=it[i].imgurl}}" imgfile="{{=it[i].imgfile}}">
				</div>
				<div class="aui-col-xs-7">
				<span>{{=it[i].name}}
				{{?it[i].result=="真"}}
				<p class="aui-pull-right"><button class="aui-btn aui-btn-primary verify " >{{=it[i].result}}</button>
				</p>
				{{??it[i].result=="假"}}
				<p class="aui-pull-right"><button class="aui-btn aui-btn-danger verify " >{{=it[i].result}}</button>
				</p>
				{{??}}
				<p class="aui-pull-right "><button class="aui-btn aui-btn-primary verify hidden" >{{=it[i].result}}</button>
				</p>
				{{?}}
				</span>
				<p class='aui-ellipsis-1'>{{=it[i].time}}</p>
				</div>
				<div class="aui-col-xs-1">
				<input class="aui-checkbox aui-radio-info" type="checkbox" name="demo">
				</div>
				</li>
				{{}}}
			</script>
			<script id="template2" type="text/x-dot-template">
				{{for(var i=0;i<it.length;i++){}}
				<li class="aui-user-view-cell aui-img" value="{{=it[i].n0}}">
				<div class="aui-col-xs-4 mysec icache2" imgurl="{{=it[i].imgurl}}" imgfile="{{=it[i].imgfile}}">
				</div>
				<div class="aui-col-xs-7">
				<span>{{=it[i].name}}
				{{?it[i].kind>0}}
				<p class="aui-pull-right isUse "><button class="aui-btn aui-btn-info" >模</button>
				</p>
				{{??}}
				<p class="aui-pull-right isUse hidden"><button class="aui-btn aui-btn-info" >模</button>
				</p>
				{{?}}
				</span>
				<p class='aui-ellipsis-1'>{{=it[i].time}}</p>
				</div>
				<div class="aui-col-xs-1">
				<input class="aui-checkbox aui-radio-info" type="checkbox" name="demo">
				</div>
				</li>
				{{}}}
			</script>
		</div>
	</body>
	<script type="text/javascript" src="../script/doT.min.js" ></script>
	<script type="text/javascript" src="../script/api.js" ></script>
	<script type="text/javascript" src="../script/zepto.js" ></script>
	<script type="text/javascript" src="../script/APICloud-rest-SHA1.js"></script>
	<script type="text/javascript" src="../script/signlist.js"></script>
	<script type="text/javascript">
		var uid = "";
		var signame = "测试用户";
		var siglist = null;
		var kind = 1;
		var Dirs = ["data/", "data/", "template/"];
		var bSelect = [true, true, true];
		var ArrCount = [0, 0, 0];
		var bOk = [false, false, false];
		function AppendData(k, data) {
			console.log(JSON.stringify(data));
			if (data && data.length > 0) {
				var template = document.getElementById('template' + k);
				var list_content = document.getElementById('list' + k);
				var pagefn = doT.template(template.text);
				var obj = document.createElement('div');
				obj.innerHTML = pagefn(data);
				list_content.appendChild(obj);
				setTimeout(cache('.icache' + k, k), 300);
				bOk[k] = true;
			}
		}

		function ChangeShow(k) {
			if (kind == k)
				return;
			var alllist = $api.domAll('.aui-user-view');
			$api.addCls(alllist[kind], 'hidden');
			kind = k;
			$api.removeCls(alllist[kind], 'hidden');
		}

		function CheckItems(k, callback) {
			var arr = [];
			var listAll = $("#list" + k + ' .aui-checkbox');
			for (var i = 0; i < listAll.length; i++) {
				if (listAll[i].checked)
					arr.push(i);
			}
			arr.reverse();
			if ( typeof callback == 'function')
				callback(arr);
		}

		function cacheItem(el, k) {
			var url = $api.attr(el, 'urls');
			var path = 'fs://' + Dirs[k] + "/" + url;
			api.readFile({
				path : path
			}, function(ret, err) {
				url = 'url(' + ret.data + ')';
				var css = "background-image:" + url;
				$api.css(el, css);
			});
		}

		function cache(selector, k) {
			var imgs = $(selector);
			for (var i = 0; i < imgs.length; i++) {
				(function() {
					var el = imgs[i];
					var imgfile = $api.attr(el, 'imgfile');
					var imgurl = $api.attr(el, 'imgurl');
					var path = 'fs://' + Dirs[k] + "/" + imgfile;
					api.readFile({
						path : path
					}, function(ret, err) {
						if (ret.status) {
							var css = "background-image:" + 'url(' + ret.data + ')';
							$api.css(el, css);
						}
					});
				})(i);
			}
		}

		apiready = function() {
			uid = $api.getStorage('uid');
			signame = $api.getStorage('signame');
			kind = api.pageParam.kind;
			console.log(uid + ',' + kind);
			if (!siglist) {
				siglist = new SignList(uid, signame);
				//if(kind>=1)
				{
					siglist.LoadFileList(1, AppendData);
					siglist.LoadFileList(2, AppendData);
				}
			}
			ChangeShow(1);
			//缺省为用户签名
			//刷新文件事件
			//全选事件
			api.addEventListener({
				name : 'SignList_SelectAll'
			}, function(ret, err) {
				var id = "#list" + kind;
				console.log(kind);
				var listAll = $api.domAll(id + ' .aui-checkbox');
				for (var i = listAll.length - 1; i >= 0; i--) {
					if (listAll[i])
						listAll[i].checked = bSelect[kind];
				}
				bSelect[kind] = !bSelect[kind];
			});
			//切换事件
			api.addEventListener({
				name : 'SignList_Change'
			}, function(ret, err) {
				if (ret && ret.value)
					ChangeShow(ret.value);
			});
			//对显示的签名列表的批量操作
			//则都涉及到DOM列表元素的操作
			//处理列表事项
			api.addEventListener({
				name : 'SignList'
			}, function(ret, err) {
				var action = ret.value;
				//alert(JSON.stringify(action));
				var id = "#list" + kind;
				var listAll = $api.domAll(id + ' .aui-checkbox');
				if (action.action == "CloudSync") {//云端同步
					siglist[action.action](2, 0, AppendData);
				} else if (action.action == "SelectAll") {//全选
					for (var i = listAll.length - 1; i >= 0; i--) {
						if (listAll[i])
							listAll[i].checked = bSelect[kind];
					}
					bSelect[kind] = !bSelect[kind];
				} else if (action.action == "AsTemplate") {//签名用于模板
					CheckItems(kind, function(arr) {
						siglist.AsTemplate(arr, AppendData);
					});
				} else if (action.action == "CancelTemplate") {//取消参考签名
					CheckItems(kind, function(arr) {
						for (var i = 0; i < arr.length; i++) {
							var obj = $api.closest(listAll[arr[i]], 'li');
							var o = $api.dom(obj, '.isUse');
							$api.addCls(o, 'hidden');
						}
						siglist.CancelTemplate(arr);
					});
				} else if (action.action == "UseTemplate") {//使用模板签名用于参考签名
					CheckItems(kind, function(arr) {
						if (arr.length < 3) {
							api.alert({
								msg : '模板数量小于3个，请重新选择！'
							}, function(ret, err) {
								//coding...
							});
						} else {
							siglist.UseTemplate(arr);
							for (var i = 0; i < listAll.length; i++) {
								var obj = $api.closest(listAll[i], 'li');
								var o = $api.dom(obj, '.isUse');
								$api.addCls(o, 'hidden');
							}
							for (var i = 0; i < arr.length; i++) {
								var obj = $api.closest(listAll[arr[i]], 'li');
								var o = $api.dom(obj, '.isUse');
								$api.removeCls(o, 'hidden');
							}
						}
					});
				} else if (action.action == "Del") {//删除
					var list = listAll;
					CheckItems(kind, function(arr) {
						siglist.DelItem(kind, arr, function(k, ids) {
							for (var i = 0; i < arr.length; i++) {
								var obj = $api.closest(list[arr[i]], 'li');
								$api.remove(obj);
							}
							siglist.SaveFileList(k);
						});
					});
				} else if (action.action == "Train") {//删除T
					var list = listAll;
					CheckItems(kind, function(arr) {
						if (arr.length < 3) {
							api.toast({
								msg : '当前模板个数少于3个，请重新选择！'
							}, 3000);
							return;
						}
						api.showProgress({
							style : 'default',
							animationType : 'fade',
							title : '服务器训练中',
							text : '请稍等片刻...',
							modal : false
						});
						siglist.Train(kind, arr, [], "Train", function(k, arr, score, thr) {
							api.hideProgress();
							if (thr && thr >= 52) {
								for (var i = 0; i < list.length; i++) {
									var obj = $api.closest(list[i], 'li');
									var o = $api.dom(obj, '.isUse');
									$api.addCls(o, 'hidden');
								}
								for (var i = 0; i < arr.length; i++) {
									var obj = $api.closest(list[arr[i]], 'li');
									var o = $api.dom(obj, '.isUse');
									$api.removeCls(o, 'hidden');
								}
								api.toast({
									msg : '训练成功，您可以进行签名认证了！'
								}, 3000);
							} else {
								api.toast({
									msg : '当前选择模板差异太大，请重新选择！'
								}, 3000);
							}
						});
					});
				} else if (action.action == "Verify") {//删除T
					var list = listAll;
					CheckItems(kind, function(arr) {
						if (arr.length <= 0) {
							alert("请先勾选好需要认证的签名！");
							return;
						}
						api.showProgress({
							style : 'default',
							animationType : 'fade',
							title : '服务器认证中',
							text : '请稍等片刻...',
							modal : false
						});
						siglist.Verify(kind, [], arr, "Verify", function(k, arr, result, thr) {
							api.hideProgress();
							for (var i = 0; i < arr.length; i++) {
								var obj = $api.closest(list[arr[i]], 'li');
								var o = $api.dom(obj, 'button');
								$api.removeCls(o, 'aui-btn-primary');
								$api.removeCls(o, 'aui-btn-danger');
								$api.removeCls(o, 'hidden');
								console.log(JSON.stringify(result));
								if (result.score1[i] - result.thr >= 0) {
									$api.addCls(o, 'aui-btn-primary');
									$api.text(o, "真");
								} else {
									$api.addCls(o, 'aui-btn-danger');
									$api.text(o, "假");
								}
							}
						});
					});
				} else if (action.action == "TrainResult") {//删除T
					siglist.GetResult(kind, function(ret) {
						if (ret.status) {
							alert(JSON.stringify(ret));
						} else
							alert("暂无训练模型结果，请重新训练");
					});
				} else if (action.action == "VerifyResult") {//删除T
					siglist.GetResult(kind, function(ret) {
						if (ret.status) {
							alert(JSON.stringify(ret.result));
						} else
							alert("暂无认证模型结果，请重新认证");
					});
				} else if (action.action == "Sort") {//删除T
					var list_content = document.getElementById('list' + 1);
					list_content.innerHTML = '';
					siglist.Sort(1, action.selIndex, action.type, AppendData);
				} else if (action.action == "Filter") {//删除T
					console.log(api.frameName);
					api.bringFrameToFront({
						from : 'siglist_frm1',
					});
					if (api.frameName == 'siglist_frm1') {
						console.log("AAA");
						var list_content = document.getElementById('list' + 0);
						list_content.innerHTML = '';
						ChangeShow(0);
						siglist.Filter(1, {
							name : action.name,
							type : action.type
						}, AppendData);
					}
				}
			});
		}
	</script>
</html>